<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>首页栏目插入管理</title>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<style type="text/css">
.sortSpan{
	border: solid 1px;
	width: 50px;
	height: 30px;
	line-height: 30px;
	display: inline-block;
	text-align: center;
}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div data-th-replace="~{layout :: header}"></div>
		<div class="layui-body" style="left: 10px;top:10px">
			<!-- 内容主体区域 -->
			<div>
				<form id="searchFrom" class="layui-form layui-form-pane"
					th:action="@{/home_column/list}" method="post">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">栏目标题</label>
							<div class="layui-input-inline">
								<input name="name" placeholder="栏目标题" class="layui-input"
									th:value="${name != null ? name : ''}" maxlength="30">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">操作人</label>
							<div class="layui-input-inline">
								<input name="operator" placeholder="操作人" class="layui-input"
									th:value="${operator != null ? operator : ''}" maxlength="30">
							</div>
						</div>
						<button type="submit" class="layui-btn">搜索</button>
					</div>
				</form>
			</div>
			<table class="layui-table">
				<colgroup>
					<col width="100">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th><b>顺序号</b></th>
						<th><b>栏目标题</b></th>
						<th><b>插入位置</b></th>
						<th><b>排序</b></th>
						<th><b>操作人</b></th>
						<th><b>操作时间</b></th>
						<th><b>操作</b></th>
					</tr>
				</thead>
				<tbody>
					<tr data-th-each="item, iterStat : ${datas}">
						<td data-th-text="${iterStat.count}+${pageIndex-1}*${pageSize}"></td>
						<td data-th-text="${item.name}"></td>
						<td>
							<span th:if="${item.sort != 0}" th:text="${item.outside == 0 ? '信息流内' : '信息流外'}">
							</span>
						</td>
						<td>
							<span th:if="${item.sort != 0}">
								<span th:if="${item.outside == 0}" 
								th:onclick="'javascript:updateSort(' + ${item.ansId} + ');'">
									信息<span class="sortSpan">[[${item.sort}]] </span>条之后
								</span>
								<span th:if="${item.outside == 1}"
								th:onclick="'javascript:updateSort(' + ${item.ansId} + ');'">
									模块<span class="sortSpan">[[${item.sort}]] </span>
								</span>
							</span>
						</td>
						<td data-th-text="${item.operator}"></td>
						<td data-th-text="${item.updateTime}" class="date"></td>
						<td>
							<a class="layui-btn layui-btn-xs" th:onclick="'javascript:edit(' + ${item.ansId} + ');'">编辑</a> 
						</td>
					</tr>
				</tbody>
			</table>

			<div id="pageContent"></div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->

		</div>
	</div>
	<!-- <script src="/layui/jquery.min.js"></script>
<script src="/layui/layui.js"></script> -->
	<script th:inline="javascript">
//JavaScript代码区域
var contextRoot = /*[[@{/}]]*/ '';
layui.use('laypage', function(){
  var laypage = layui.laypage;
  //执行一个laypage实例
  laypage.render({
	  elem: 'pageContent'
	  ,count:[[${total}]] //数据总数，从服务端得到
	  ,curr: [[${pageIndex}]]	
	  ,layout:['count','prev', 'page', 'next','skip']
	  ,jump: function(obj, first){
		  console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
		    console.log(obj.limit); //得到每页显示的条数
	    //首次不执行
	   if(!first || [[${pageIndex}]] != obj.curr){
	      window.location.href = contextRoot+'/home_column/list?pageIndex=' + obj.curr + "&pageSize=" + obj.limit +
	      		"&" + $("#searchFrom").serialize();
	    } 
	  }
	}); 
});
function updateSort(dateId){
	layer.open({
		type: 2,
		title: "修改排序",
		area: ['40%',"40%"],
		content: contextRoot+"/home_column/edit_view?ansId=" + dateId, //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		btn:['保存','取消'],
		yes:function(index){
			save(index);
		},
		cancel:function(){}
	});
}
function edit(dateId){
	layer.open({
		type: 2,
		resize:false,
		title: "编辑首页栏目插入",
		area: ['800px',"40%"],
		content: contextRoot+"/home_column/edit_view?ansId=" + dateId + "&isUpdate=true", //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		btn:['保存','取消'],
		yes:function(index){
			save(index);
		},
		cancel:function(){}
	});
}
/**
 * 保存标签
 */
function save(index){
	layer.confirm('确定要修改该栏目吗?',function(index) {
		var obj = $("iframe").contents().find("#addForm").serialize();
		$.ajax({
			type : "POST",
			data : obj,
			url : contextRoot+"/home_column/edit",
			dataType : "json",
			success : function(msg) {
				console.log(msg);
				if (msg.meta.code == 0) {
					layer.msg("添加成功!");
					layer.close(index);
					window.location.reload();
				} else {
					layer.msg(msg.meta.message);
				}
			}
		});
	});
}
</script>
<div th:include="footer::update_sort"></div>
</body>
<script type="text/javascript" th:src="@{/common.js}"></script>
</html>